<template>
  <div class="flex-container">
    <div class="title-row">
      <h1 class="title">活动进展</h1>
    </div>

    <div class="content-row">
      <div class="c1">
        <div class="font1">12</div>
        <h1 class="title">活动数量<br />(次)</h1>
      </div>

      <div class="c1">
        <div class="font1">15.68</div>
        <h1 class="title">活动参与<br />(MWp)</h1>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex-container {
  width: 100%; /* 让该元素占满其父容器的宽度 */
  height: 20%; /* 该元素高度为父容器高度的50% */
  display: flex;
  flex-direction: column; /* 设置为纵向布局 */
  gap: 0px; /* 调整元素之间的间隔距离 */
  padding: -10%;
  flex-grow: 2;
  background-color: rgb(10, 21, 44);
}
.title-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.content-row {
  display: flex;
  gap: 28%; /* 调整元素之间的间隔距离 */
}
.c1 {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 调整元素之间的间隔距离 */
}
.title {
  font-size: 15px;
  font-weight: bold;
}
.font1 {
  color: rgb(0, 221, 248);
  text-shadow: 5px 5px 8px rgba(3, 68, 138);
  font-size: 40px;
}
.font2 {
  color: rgb(253, 245, 2);
  text-shadow: 5px 5px 8px rgba(3, 68, 138);
  font-size: 40px;
}
</style>
